<template>
  <div class="otherHome">
    <Other-Header @changelang="changeLanguage" bgColor="#5741d9"></Other-Header>
    <div class="workOraderBox">
      <!-- 面包屑crumbs-->

      <!-- 内容 -->
      <div class="workOrderDetails">
        <h3 class="title">{{$t('l.other_a_5')}}</h3>
        <div class="toolbar">
          <div class="fr" v-show="!panelVisible">
            <el-input
              :placeholder="$t('l.other_a_63')"
              suffix-icon="el-icon-search"
              size="small"
              style="width: 240px;"
            ></el-input>
          </div>
          <el-radio-group v-model="type" size="small" @change="onChange">
            <el-radio-button label="0">{{$t('l.other_a_6')}}</el-radio-button>
            <el-radio-button label="1">{{$t('l.other_a_7')}}</el-radio-button>
          </el-radio-group>
        </div>
        <div class="workOrderCon" v-show="panelVisible">
          <div class="formBox">
            <el-form
              label-position="top"
              ref="orderForm"
              :rules="rules"
              label-width="80px"
              :model="orderForm"
            >
              <el-form-item :label="$t('l.other_a_8')" prop="type">
                <el-select :placeholder="$t('l.other_a_9')" v-model="orderForm.type">
                  <el-option
                    v-for="item in orderType"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('l.other_a_10')" prop="title">
                <el-input :placeholder="$t('l.other_a_10')" v-model="orderForm.title"></el-input>
              </el-form-item>
              <el-form-item>
                <span slot="label">
                  {{$t('l.other_a_11')}}
                  <em v-if="orderForm.type==6">{{$t('l.other_a_12b')}}</em>
                  <em v-else>{{$t('l.other_a_12a')}}</em>
                </span>
                <div class="uploadBox" v-if="orderForm.type==6">
                  <div class="uploadInner">
                    <div class v-if="!filepath.length">
                      <p class="uploadexp">
                        <img src="../../assets/images/ptbg3.png" />
                      </p>
                      <p class="uploadtext">{{$t('l.other_a_65')}}</p>
                    </div>
                    <div v-else>
                      <img :src="filepath[0]" style="position: absolute;width: 100%;height:100%;" />
                    </div>
                  </div>
                  <div class="uploadDesc">
                    {{$t('l.other_a_66')}}
                    <span>
                      {{$t('l.other_a_67')}}
                      <input
                        type="file"
                        ref="file"
                        id="uploadMore"
                        @change="handleFileChange($event)"
                        style="position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;z-index:9;cursor:pointer;"
                      />
                    </span>
                  </div>
                </div>
                <div class="uploadBox" v-else>
                  <div class="uploadItem" v-for="(img, index) in filepath" :key="img.id">
                    <i @click="uploadImgDelete(index)"></i>
                    <img :src="img" class="uploadImg" />
                  </div>
                  <div class="upload" v-show="filepath.length<3">
                    <p>
                      <span class="icon"></span>
                    </p>
                    <p class="text">{{$t('l.other_a_11')}}</p>
                    <input
                      type="file"
                      ref="file"
                      id="uploadMore"
                      @change="handleFileChange($event)"
                      style="position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;z-index:9;"
                    />
                  </div>
                </div>
              </el-form-item>
              <el-form-item :label="$t('l.other_a_13')" prop="content">
                <el-input
                  type="textarea"
                  v-model="orderForm.content"
                  :rows="5"
                  :placeholder="$t('l.other_a_14')"
                ></el-input>
              </el-form-item>

              <div class="btnBox">
                <el-button type="primary" class="btn-primary" @click="onSubmit">{{$t('l.other_a_64')}}</el-button>
              </div>
            </el-form>
          </div>
        </div>
        <div class="workOrderCon" v-show="!panelVisible">
          <div class="workOrderTable">
            <el-table :data="workOrderList" style="width: 100%">
              <el-table-column prop="orderNo" :label="$t('l.other_a_16')" align="center"></el-table-column>
              <el-table-column prop="orderTitle" :label="$t('l.other_a_17')"></el-table-column>
              <el-table-column prop="createTime" :label="$t('l.other_a_18')"></el-table-column>
              <el-table-column :label="$t('l.other_a_19')">
                <template slot-scope="scope">
                  <span v-if="scope.row.status==1" class>{{$t('l.other_a_21')}}</span>
                  <span v-else class="status-color">{{$t('l.other_a_22')}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="replyTime" :label="$t('l.other_a_20')"></el-table-column>
              <el-table-column :label="$t('l.other_a_23')" align="center">
                <template slot-scope="scope">
                  <el-button @click="jobDetail(scope.row.workSheetId)" type="text">{{$t('l.other_a_24')}}</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="transPages">
              <el-pagination
                v-show="hasPagination"
                background
                layout="prev, pager, next"
                :page-count="pageCount"
                @current-change="onCurrentChange"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";
import lrz from "lrz";

export default {
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      type: 0,
      orderType: [],
      panelVisible: true,
      hasPagination: false,
      pageNum: 1,
      pageCount: 0,
      workOrderList: [],
      filepath: [],
      filepathdata:[],
      orderForm: {
        type: "1",
        title: "",
        content: "",
        picUrls: ""
      },
      rules: {
        type: [{ required: true, message: this.$t('l.other_a_8'), trigger: "blur" }],
        title: [{ required: true, message: this.$t('l.other_a_10'), trigger: "blur" }],
        content: [
          { required: true, message: this.$t('l.other_a_14a'), trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.findDictList();
    this.updateJobList();
  },
  methods: {
    changeLanguage(){
      this.findDictList();
    },
    onChange(value) {
      this.panelVisible = value == 0;
    },
    onCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.updateJobList();
    },
    jobDetail(workOrderId) {
      this.$router.push({ path: "/workDetail", query: { workOrderId } });
    },
    async findDictList() {
      let res = await api.selectList({
        language: this.$i18n.locale,
        category: "workSheetsType"
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.orderType = data.map(item => ({
          label: item.name,
          value: item.value
        }));
      }
    },
    async updateJobList() {
      let res = await api.jobList({
        pageNum: this.pageNum,
        pageSize: 15
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        let { records: joblist, pages } = data;
        this.workOrderList = joblist.map(item => ({
          workSheetId: item.workSheetId,
          orderNo: item.orderNumber,
          orderTitle: item.title,
          createTime: item.createTime,
          status: item.status, //工单状态(1：提交成功 2：已回复)
          replyTime: item.updateTime
        }));
        this.pageCount = pages;
        this.hasPagination = this.pageCount > 1;
      } else {
        this.$layer.msg(msg);
      }
    },
    handleFileChange(data) {
      let that = this;
      let file = data.target.files;
      if (!file.length) return; // 取消上传图片报错
      if (!file || !window.FileReader) return;
      if (/^image/.test(file[0].type)) {
        // 创建一个reader
        var reader = new FileReader();
        reader.readAsDataURL(file[0]);
        reader.onloadend = function(e) {
          that.filepath.push(e.target.result);
          lrz(file[0], [])
            .then(function(rst) {
              //成功时执行
              that.uploadImg(rst.base64, data.target.id);
            })
            .catch(function(error) {
              //失败时执行
            })
            .always(function() {
              //不管成功或失败，都会执行
            });
        };
      }
    },
    //上传
    async uploadImg(datas, id) {
      let res = await api.uploadImg({
        file: datas
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.filepathdata.push(data);
      } else {
        this.$layer.msg(msg);
      }
    },
    // 删除当前上传图片
    uploadImgDelete(index) {
      this.filepath.splice(index, 1);
    },
    // 提交表单
    onSubmit() {
      this.$refs["orderForm"].validate(valid => {
        if (valid) {
          this.submitForm();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async submitForm() {
      let type = this.orderForm.type;

      if (type == 6 && !this.filepathdata.length) {
        this.$layer.msg(this.$t('l.other_a_11a'));
        return;
      }

      let params = {
        title: this.orderForm.title,
        type: type,
        content: this.orderForm.content,
        picUrls: this.filepathdata.join(",")
      };
      let res = await api.createJob(params);
      let { code, msg } = res.data;
      if (code == 0) {
        this.$layer.msg(this.$t('l.other_a_41'));
        this.type = 1;
        this.panelVisible = false;
        this.updateJobList();
      } else {
        this.$layer.msg(msg);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.otherHome {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-top: 100px;
}
.workOraderBox {
  width: 1200px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  margin: 0 auto;

  /* 面包屑 */
  /deep/.el-breadcrumb__inner a,
  /deep/.el-breadcrumb__inner.is-link {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 56, 94, 0.5);
  }
  /deep/span.el-breadcrumb__item:last-child span {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: #2D8DFE;
  }
  /* 内容 */
  .workOrderDetails {
    background: rgba(255, 255, 255, 1);
    padding: 36px 60px 72px;
    box-sizing: border-box;
    min-height: 790px;
    .title {
      position: relative;
      height: 25px;
      font-size: 18px;
      font-familyA: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(51, 56, 94, 1);
      line-height: 25px;
      margin-bottom: 20px;
      &::before {
        position: absolute;
        content: "";
        width: 3px;
        height: 16px;
        background: #2D8DFE;
        border-radius: 2px;
        margin-top: 3px;
        left: -20px;
      }
    }
  }

  .formBox {
    width: 520px;
    margin-top: 36px;
    /deep/.el-form-item__label {
      height: 20px;
      font-size: 14px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 56, 94, 1);
      line-height: 20px;
      margin-bottom: 4px;
      em {
        opacity: 0.5;
        font-style: normal;
        margin-left: 4px;
      }
    }
    .el-form-item {
      margin-bottom: 20px;
    }
    .el-select {
      width: 100%;
    }
    .btnBox {
      margin-top: 30px;
    }
    .btn-primary {
      width: 250px;
      height: 40px;

      background: linear-gradient(90deg,#3360FF 0%,#04A6FE 100%);
      border-radius: 4px;
    }
  }

  .uploadBox {
    margin-top: 15px;
    font-size: 0;
    .uploadItem {
      display: inline-block;
      vertical-align: top;
      position: relative;
      margin-right: 10px;
      i {
        position: absolute;
        right: -5px;
        top: -5px;
        width: 14px;
        height: 14px;
        background: url(../../assets/images/delete.png) no-repeat;
        background-size: 100% 100%;
        z-index: 99;
        cursor: pointer;
      }
    }
    .uploadImg {
      width: 130px;
      height: 130px;
    }
    .upload {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: 130px;
      height: 130px;
      border-radius: 3px;
      border: 1px solid rgba(221, 224, 235, 1);
      text-align: center;
      .icon {
        display: inline-block;
        vertical-align: top;
        width: 34px;
        height: 31px;
        background: url(../../assets/images/icon_add.png) no-repeat;
        background-size: 100% 100%;
        margin-top: 30px;
      }
      .text {
        opacity: 0.5;
      }
    }
    .uploadInner {
      position: relative;
      float: left;
      width: 228px;
      height: 160px;
      background: rgba(249, 249, 255, 1);
      color: #fff;
      border-radius: 2px;
      .uploadtext {
        height: 32px;
        background: rgba(131, 131, 248, 1);
        opacity: 0.59;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 14px;
        font-familyA: PingFangSC-Regular;
        font-weight: 400;
        line-height: 30px;
        text-align: center;
      }
      .uploadexp {
        padding: 20px 42px 0;
      }
    }
    .uploadDesc {
      overflow: hidden;
      padding-left: 16px;
      padding-top: 55px;
      line-height: 25px;
      color: #33385e;
      span {
        position: relative;
        color: #2D8DFE;
        display: inline-block;
        cursor: pointer;
        overflow: hidden;
        vertical-align: middle;
      }
    }
  }

  .workOrderTable {
    font-size: 14px;
    color: #33385e;
    margin-top: 20px;
    /deep/ thead tr {
      background-color: #f2f6fa;
    }
    /deep/ th {
      height: 50px;
      color: rgba(51, 56, 94, 0.6);
    }
    .status-color {
      color: #52c41a;
    }
  }

  .transPages {
    margin-top: 40px;
    margin-bottom: 30px;
    width: 100%;
    text-align: center;
  }
}
</style>
